<template>
  <div class="blletBox" v-show="info.show"
    :style="{ position: 'absolute', 'will-change': 'top, left', top: info.top + 'px', left: info.left + 'px' }">
    <div class="blletBox-content">
      <div class="blletBox-arrow"></div>
      <div class="blletBox-inner">
        <div class="blletBox-content">
          <div class="blletBox-content-title">
            自定义{{ info.text }}
          </div>
          <div class="blletBox-input" v-if="info.text == '线段'">
            <el-select v-model="lineForm.line">
              <el-option v-for="item in fontLineType.line" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
            <el-select v-model="lineForm.type">
              <el-option v-for="item in fontLineType.type" :key="item.id" :label="item.name" :value="item.type">
              </el-option>
            </el-select>
            <input type="text" v-model.number="lineForm.text" class="blletBox_input" placeholder="线段粗细">
          </div>
          <input v-else type="text" v-model.number="text" @keydown.enter="updataInfo" class="blletBox_input">
          <div class="blletBox__action-text" @click="updataInfo">
            添加{{ info.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fontLineType } from '../configuration.js'
export default {
  props: {
    info: {
      type: Object,
      default: {
        show: false, // 是否展示组件
        text: '文字', // 点击的组件展示的文字
        // 组件的位置
        top:0,
        left:0
      }
    }
  },
  components: {},
  data() {
    return {
      text: '', // 添加文字或图片
      fontLineType, // 线段类型
      lineForm: { //添加线段
        line: "横线",
        type: "solid",
        text: ""
      }
    };
  },
  created() {

  },
  methods: {
    // 点击添加或敲下回车进行添加
    updataInfo() {
      if (this.info.text == '文字') {
        if(!this.text) return
        this.$emit('addList', this.text)
      }else if(this.info.text == '线段'){
        if(!this.lineForm.text) return
        this.$emit('addLine',{...this.lineForm})
      }
      this.$emit('update:info', { show: false })
      this.text=''
      this.lineForm.text=''
    },
  },
};
</script>
<style lang="scss" scoped>
$dominantColor: #07a453;

.blletBox {
  min-width: 150px;
  display: block;
  font-size: 13px;
  line-height: 1.5;
  position: absolute;
  z-index: 1060;
  cursor: pointer;
}

.blletBox:hover .blletBox-content-title {
  color: $dominantColor;
}


.blletBox-arrow {
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-color: transparent;
  border-style: solid;
  top: 50%;
  margin-top: -7px;
  left: 9px;
  border-width: 7px 7px 7px 0;
  border-right-color: white;
}

.blletBox-inner {
  width: 100%;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 4px;
  box-shadow: 0 1px 6px #00000033;
  white-space: nowrap;
}

.blletBox-content {
  padding: 8px 16px;
}

.blletBox-content-title {
  margin-bottom: 10px;
}

.blletBox_input {
  display: inline-block;
  width: 100%;
  height: 30px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 13px;
  border: 1px solid #dcdee2;
  border-radius: 2px;
  color: rgba(0, 0, 0, .85);
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
}

.blletBox-input {
  width: 220px;
  height: 30px;
  display: flex;
  align-items: center;
  /deep/ .el-input{
    margin-right: 5px;
  }
  /deep/ .el-input__inner{
    padding-right: 18px;
  }
  /deep/ .el-input__suffix{
    right: 0;
  }
}

.blletBox__action-text {
  color: $dominantColor;
  cursor: pointer;
  margin-top: 10px;
}

input:hover {
  border: 1px solid $dominantColor;
}

input:focus {
  border: 1px solid $dominantColor;
  box-shadow: 0 0 3px $dominantColor;
}

</style>
